<link rel="stylesheet" href="../shiro/manager/jquery.mobile-1.3.2.css">
<script type="text/javascript" src="../shiro/manager/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../shiro/manager/jquery.mobile-1.3.2.js"></script>

<div data-role="page" id="menu"><!--page-->
	<div data-role="header"><!--header-->
		<h1>Menu</h1>
	</div>
	<div data-role="content"><!--content-->
		<p>What vehicles do you like?</p>
		<p><a href="#Cars">Cars</a></p>
		<p><a href="#Trains">Trains</a></p>
		<p><a href="#Planes">Planes</a></p>
	</div>
	<div data-role="footer"><!--footer-->
		<h4>Page Footer</h4>
	</div>
</div>

<div data-role="page" id="Cars"><!--page-->
	<div data-role="header"><!--header-->
		<h1>Cars</h1>
	</div>
	<div data-role="content"><!--content-->
		<p>We can add a list of cars</p>
	</div>
	<div data-role="footer"><!--footer-->
		<h4>Page Footer</h4>
	</div>
</div>

<!-- Start of third page -->
<div data-role="page" id="Trains"><!--page-->
	<div data-role="header"><!--header-->
		<h1>Trains</h1>
	</div>
	<div data-role="content"><!--content-->
		<p>We can add a list of trains</p>
	</div>
	<div data-role="footer"><!--footer-->
		<h4>Page Footer</h4>
	</div>
</div>

<!-- Start of fourth page -->
<div data-role="page" id="Planes"><!--page-->
	<div data-role="header"><!--header-->
		<h1>Planes</h1>
	</div>
	<div data-role="content"><!--content-->
		<p>We can add a list of planes</p>
	</div>
	<div data-role="footer"><!--footer-->
		<h4>Page Footer</h4>
	</div>
</div>

